<template>
  <el-upload
    class="mt-10"
    action="#"
    :auto-upload="false"
    list-type="picture-card"
    :on-change="onChange"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
import http from "@/utils/request";

export default {
  name: "SetpThree",
  props: ["saveData"],
  methods: {
    // 上传图像
    async onChange(file, files) {
      try {
        const formData = new FormData();
        formData.set("image", file.raw);
        formData.set("product", this.saveData.id);
        const res = await http.post("/product-image/", formData);
        if (res.status !== 201) return this.$message.error("上传图片失败");
        this.$message.success("上传成功，请保存");
        // 修改商品的图片
        this.$emit("updateImage", res.data.image);
        if (files.length > 1) {
          files.shift();
        }
      } catch (err) {
        this.$delete(files, 0);
        this.$message.error("图片过大");
      }
    },
  },
};
</script>

<style scoped></style>
